<template>
    <div class="task-manage-container">
        <el-table
            v-show="tableData.length"
            :key="status"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            :data="tableData"
            style="width: 100%;height: 100%;overflow-y: auto;">
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60">
            </el-table-column>
            <el-table-column
                prop="status"
                label="任务状态"
                width="120"
                v-if="status === '1'">
                <template slot-scope="scope">
                    <span class="green" v-if="scope.row.status !== 1">已完成</span>
                    <span
                        class="blue"
                        v-else-if="new Date(scope.row.endDate).getTime() - new Date().getTime() > 24 * 60 * 60 * 1000">
                            待填报
                        </span>
                    <span
                        class="red"
                        v-else-if="new Date(scope.row.endDate).getTime() - new Date().getTime() <= 0">
                            逾期{{ Math.ceil(Math.abs((new Date(scope.row.endDate).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000))) }}天
                        </span>
                    <span class="yellow" v-else>即将到期</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称">
                <template slot-scope="scope">
                    <el-link type="primary" @click="toDetail(scope.row)">{{ scope.row.name }}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                prop="dataCount"
                width="120"
                label="已采集数量">
            </el-table-column>
            <el-table-column
                prop="creator"
                width="120"
                label="下发人">
            </el-table-column>
            <el-table-column
                prop="creatorDepartmentName"
                label="下发科室">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="下发时间">
            </el-table-column>
            <el-table-column
                prop="endDate"
                label="截止时间">
                <template slot-scope="scope">
                    {{ new Date(scope.row.endDate).format('yyyy-MM-dd') }}
                </template>
            </el-table-column>
            <el-table-column
                label="状态"
                v-if="status === '2'">
                <template slot-scope="scope">
                    {{ scope.row.deleted ? "已删除" : "已完成" }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="200"
                v-if="status === '1'">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="fillInRow(scope.row)">填报</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-popover
                        placement="bottom"
                        width="260"
                        trigger="click">
                        <div class="step-import">
                            <div class="step1">
                                <el-link type="primary" @click="downTemplate(scope.row)">下载模板</el-link>
                                <div>请先下载模板，根据模板填写后导入。<br>部分复杂表格格式暂不支持导入，请完成导入后进入详情页面手动添加。</div>
                            </div>
                            <upLoad-normal
                                :accept="'.xlsx'"
                                :isSingle="true"
                                @httpRequest="httpRequest">
                                <el-link type="primary" @click="importRow(scope.row)">导入excel</el-link>
                            </upLoad-normal>
                        </div>
                        <el-button slot="reference" size="mini" type="text">导入</el-button>
                    </el-popover>
                    <el-divider direction="vertical"></el-divider>
                    <el-button size="mini" type="text" @click="submitRow(scope.row)">提交</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button size="mini" type="text" @click="assignRow(scope.row)">指派</el-button>
                </template>
            </el-table-column>
        </el-table>
        <ask-empty-text
            style="min-height: 400px;"
            v-if="tableData.length === 0">
        </ask-empty-text>
    </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from "vue-property-decorator";
import UpLoadNormal from "@/components/upload-normal/index.vue";
import { dialogSelect } from "@/views/process-manage/src/components/person-selection/index";
import DownLoadTemplateUpLoadMixins from "@/views/module-manage/src/collection-task/village/mixins";
import { State } from "vuex-class";

@Component({
    name: "DeclareCollectionTaskNotAlive",
    components: {
        UpLoadNormal
    }
})
export default class DeclareCollectionTask extends Mixins(DownLoadTemplateUpLoadMixins) {
    @State(state => state.authArea) authArea: any;
    @State(state => state.user.userInfo) user: any;


    @Prop({
        type: Number,
        default: 0
    }) pageSize: number | undefined;

    @Prop({
        type: Number,
        default: 0
    }) pageIndex: number | undefined;

    @Prop({
        type: String,
        default: '1'
    }) status!: string;


    // 表格数据
    tableData = [];

    created() {
        this.initPage();
    }

    initPage() {
        this.getTable();
    }

    // 查询表格
    async getTable(type?: any) {
        if (type === "toDetail") {
            const row = this.tableData.filter(
                (item: any) => item.formId === this.currentForm.formId
            );
            this.toDetail(row[0]);
        }
        const data: any = {
            status: Number(this.status),
            taskKind: 2,
            pageSize: this.pageSize,
            currentPage: this.pageIndex,
            category: 'handle'
        };

        const res = await this.$server["task/getTable"]({
            data
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            return res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    resetForm(formName: any) {
        (this.$refs[formName] as any).resetFields();
    }

    // 导入
    importRow(row: any) {
        this.currentForm = row;
    }

    // 查看
    toDetail(row: any) {
        this.$router.push({
            name: "TownTableDetail",
            query: {
                id: row.id,
                formId: row.formId,
                assigneeId: row.assigneeId,
                name: row.name,
                status: row.status,
                description: row.description,
                processInstanceId: row.processInstanceId,
                reason: row.reason,
                descriptionType: row.descriptionType
            }
        });
    }

    handleClick() {
        this.pageIndex = 1;
        this.getTable();
    }

    // 填报
    fillInRow(row: any) {
        this.$router.push({
            name: "TownDeclareFillIn",
            query: {
                rowId: row.id,
                id: row.formId,
                processInstanceId: row.processInstanceId,
                name: row.name,
                description: row.description,
                descriptionType: row.descriptionType
            }
        });
    }

    // 提交
    submitRow(row: any) {
        this.$confirm("是否确认提交任务", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async() => {
                const res = await this.$server["task/complete"]({
                    data: {
                        taskId: row.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("操作成功");
                    this.getTable();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            })
            .catch();
    }

    // 指派
    assignRow(row: any) {
        dialogSelect({
            isSingle: true,
            tabs: [
                {
                    label: "镇成员",
                    name: "town"
                }
            ],
            sure: async(vm: any, model: any) => {
                vm.close();
                if (model.selectedList.length) {
                    const res = await this.$server["collection/turnTask"]({
                        data: {
                            taskId: row.id,
                            userId: model.selectedList[0]
                        }
                    });
                    if (res.data.code === 200) {
                        this.getTable();
                        this.$message.success("操作成功");
                    } else {
                        this.$message.error(res.data.message || "接口请求错误!");
                    }
                }
            },
            getOptions: (vm: any) => this.getOptions(vm)
        });
    }

    // 获取选项
    async getOptions(vm: any) {
        const getTown = async() => {
            const res = await this.$server["org/getMember"]({
                data: {
                    departmentId: "",
                    pageSize: 999,
                    currentPage: 1
                },
                loader: false
            });
            if (res.data.code === 200) {
                const arrObj: any = {};
                res.data.data.records.filter((item: any) => item.id !== this.user.id).forEach((item: any) => {
                    if (item.id === this.user.id) {
                        item.disabled = true;
                    }
                    if (arrObj[item.departmentId]) {
                        arrObj[item.departmentId].push({
                            ...item,
                            governmentName: item.departmentName
                        });
                    } else {
                        arrObj[item.departmentId] = [
                            {
                                ...item,
                                governmentName: item.departmentName
                            }
                        ];
                    }
                });
                vm.getOptions(Object.values(arrObj) || []);
            } else {
                vm.getOptions([]);
            }
        };
        await getTown();
    }
}
</script>
<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 132px);
    }
    .pbb__search-box {
        background: transparent !important;
    }
}
.task-manage-container {
    height: calc(100% - 40px);
}
.pbb__table {
    .green {
        color: #32A78F;
    }
    .red {
        color: #de2728;
    }
    .yellow {
        color: #f3c14f;
    }
    .blue {
        color: #2c82c9;
    }
}
</style>
